웹개발 및 최신 테크 소식을 전하는 블로그, 웹이즈프리
웹워커(Web Worker)는 백그라운드에서 작업을 실행하여 사용자에게 무거운 프로세스 동작시 멈추는 듯한 현상을 나타나지 않도록 도와줍니다. 이런 웹워커 환경은 비교적 제한적입니다. 특히 메인화면의 Scope 및 DOM이 별개입니다. 즉 여기서의 this는 window객체가 아닌 Worker 객체를 가르키게 됩니다.
# 웹워커를 사용하는 곳은?
모든 작업이 백그라운드에서 작업될 필요는 없습니다. 아래의 작업들이 워커를 통해 가능합니다.
간단한 Worker를 사용하는 코드입니다. 아래의 코드를 봐주세요.
1) 웹워커 실행하기 예제소스
맨 윗줄에 해당하는 파일을 실행하게 되고 완료될 경우 onmessage를 통해 확인할 수 있게됩니다.
terminate() 메소드는 웹워커를 중지하는 코드로 실행중인 경우라도 바로 중지합니다.
2) 실행 파일에 담기는 내용
위 코드는 웹워커 백그라운드 환경에서 실행하고 끝나게 되는 시점에 postMessage() 메소드를 통해 완료 상태를 보내게됩니다.
# 웹워커를 사용하는 곳은?
모든 작업이 백그라운드에서 작업될 필요는 없습니다. 아래의 작업들이 워커를 통해 가능합니다.
- 화면 인터페이스에 영향이 없는 경우
- 시간이 많이 걸리는 작업의 처리
- 이미지와 관련된 처리
- 복잡한 암호화 처리
간단한 Worker를 사용하는 코드입니다. 아래의 코드를 봐주세요.
1) 웹워커 실행하기 예제소스
var myWorker = new Worker('파일이름'); // 실행할 파일이름
worker.onmessage = function(event) {
console.log("완료:" + event.data);
};
worker.terminate(); // 웹워커 중지하기terminate() 메소드는 웹워커를 중지하는 코드로 실행중인 경우라도 바로 중지합니다.
2) 실행 파일에 담기는 내용
// 실행할 코드
postMessage('Completed!!');위 코드는 웹워커 백그라운드 환경에서 실행하고 끝나게 되는 시점에 postMessage() 메소드를 통해 완료 상태를 보내게됩니다.
아래의 글도 찾고 계시지 않나요?
